const path = require('path');

// 导入ESLint插件
const ESLintPlugin = require('eslint-webpack-plugin');

// 导入打包html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//导入抽取css文件插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//导入压缩css插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//导入压缩js插件
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    mode:"production", //生产模式

    // 多入口文件打包
    entry: {
        one: "./src/main.js",
        two: "./src/app.js"
    },

    //出口文件配置 - 多文件出口 - 文件单独打包
    output: {
        path: path.resolve(__dirname, "../build"), //打包生产保存路径
        filename: "js/[name][hash:8].js", //保存文件名
        clean: true, //自动清除上一次打包生成的文件
        publicPath:"/"
    },

    //配置加载器
    module: {
        //设计规则
        rules: [
            //处理css文件的规则
            {
                test: /\.css$/, //筛选，在文件夹中文件后缀名是.css的文件
                use: [
                  MiniCssExtractPlugin.loader,
                 //"style-loader",//style 被 MiniCssExtractPlugin.loader,代替
                 "css-loader",
                 'postcss-loader'
                ] // 执行顺序从后往前
            },
            //处理less文件的规则
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    //"style-loader", //将css插入到html中
                    "css-loader",//将css转成commonjs模块
                    'postcss-loader',
                    "less-loader" //将less转成css
                ]
            },
            //处理babel兼容
            {
                test: /\.js$/,
                exclude: /node_modules/, //排除编译文件夹
                use: {
                    loader: "babel-loader",
                    options: {
                        // presets:['@babel/preset-env'] //指定babel预设包 - ES6->ES5
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ]
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件 - 生成器
                generator: {
                    filename: 'images/[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'fonts/[hash:8][ext]',
                },
            },
        ]
    },

    // 调用插件
    plugins: [
        new ESLintPlugin(), //调用eslint代码检查插件
        new HtmlWebpackPlugin({
            template: "./public/index.html", //模板文件位置（源html文件位置）
            filename: "index.html", //首页文件html必须叫index.html
            inject: "body", //js导入的位置
            hash: true, //改变引入的js文件名是否含有hash值
            minify: {
                removeAttributeQuotes: true,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        }),
        // 3. 配置css文件
        new MiniCssExtractPlugin({					
            filename: "css/[hash:8].css",
        }),
    ],

    //优化项配置
    optimization:{
        minimizer: [new CssMinimizerPlugin(),new TerserPlugin()],
    }
}